<template>
  <div class="bottom-navbar">
    <el-row>
      <el-col
        v-for="item in navList"
        :xl="0"
        :lg="0"
        :key="item.navName"
        class="nav-item"
        :span="parseInt(num)"
      >
        <router-link :to="item.path" active-class="isActive">
          <div><img class="icon" :src="item.icon" alt="" /></div>
          {{ item.navName }}
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { navbar } from './navList'

export default defineComponent({
  setup() {
    /* 引入底部导航配置 */
    const navList = navbar.navList
    /* 根据element的col的响应式布局占位24 计算我的每一个导航应占几位 */
    const num = 24 / navList.length

    return {
      navList,
      num
    }
  }
})
</script>

<style scoped lang="less">
.bottom-navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  .nav-item {
    height: 60px;
    text-align: center;
    font-size: 12px;
    .isActive {
      background: linear-gradient(
        rgba(255, 184, 184, 0),
        rgba(86, 249, 255, 0.822),
        rgba(255, 184, 184, 0)
      );
    }
    .icon {
      width: 30px;
      height: 30px;
      margin: 10px 0 3px 0;
    }
  }
}
</style>
